<template>
	<div class="brand-list">
		<header class="index-banner">
			<swiper :data="banner_data" img-key="pic"></swiper>
		</header>
		<section class="content layout-juscon container">
			<div class="left-content flex_1" ref="content">
				<ul>
					<li v-for='(items,index) in data' :id="items.initial">
						<h3 class="border-b pt10 pb10">{{ items.initial }}</h3>
						<ul class="row">
							<li class="col s4 pl10 pr10 mt15 align-center" v-for="item in items.list">
								<img :src="item.brand_pic" class="responsive-img img-bg" alt="">
								<p class="fs12 c666 mt10">{{ item.brand_name }}</p>
							</li>
						</ul>
					</li>
				</ul>
			</div>
			<div class="right-content" style="width: 1rem;">
				<ul>
					<li class="align-center block" @click="goAnchor('#'+ item)" v-for="item in letter_data">{{ item }}</li>
				</ul>
			</div>
		</section>
	</div>
</template>

<script>
import Swiper from '@/components/Swiper';
	export default{
		components : {
			Swiper
		},
		data()
		{
			return{
				banner_data 	: [],
				data        	: [],
				letter_data     : ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
			}
		},
		created()
		{
			this.loadData();
			this.loadNavData();

		},
		methods:
		{
			loadData()
			{
				this.$http.get('/brand/list',{ params : { type : 2 }}).then(res => {
					this.data = res.data;
				})
			},
			loadNavData()
			{
				this.$http.get('/adv/list',{ params : { type: 1 }}).then( res => {
					this.banner_data = res.data
				})
			},
			goAnchor(selector) {
		        var anchor = this.$el.querySelector(selector);
		        this.$refs.content.scrollTop = anchor.offsetTop;
		    }
		}
	}
</script>

<style lang="less">
	html,body{
		height: 700px;
	}
	.brand-list{
		.left-content{
			height: 30rem;
			overflow-x: scroll;
		}
		.index-banner{
			.van-swipe-item{
				img{
					height: 10rem;
				}
			}
		}
	}
</style>
